<template>
  <div>
    <!-- 城市列表顶部 -->
    <div class="CityListTop">
      <van-nav-bar title="城市列表">
        <template #left>
          <van-icon name="arrow-left" size="18" @click="$router.go(-1)"/>
        </template>
      </van-nav-bar>
    </div>
    <!-- 城市列表 -->
    <div class="CityList">
      <van-index-bar :index-list="str" >
        <div class="nowCity">
          <van-cell title="当前城市" :label="NowCity"></van-cell>
        </div>
        <!-- 城市排序 -->
        <div class="CitySort" >
          <van-index-anchor :index="index" v-for="(items, index) in firstName" :key="index" ref="anchor">
            {{index}}
            <van-cell v-for="(item, indexs) in items" :key="indexs" @click="CityBtn(item)">{{
              item
            }}</van-cell>
          </van-index-anchor>
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import { ChoiceCityRequest, HotCityRequest } from '@/api'
const pinyin = require('js-pinyin')
pinyin.setOptions({ checkPolyphone: false, charCase: 0 })
export default {
  data () {
    return {
      // 所有城市列表
      CityList: [],
      // 热门城市
      HotCityList: [],
      // 城市名
      cityNameList: [],
      firstName: {},
      str: [],
      NowCity: null
    }
  },
  activated () {
    this.NowCity = this.$store.state.NowCityOlny[0].label || '杭州'
  },
  created () {
    this.AllFn()
  },
  methods: {
    // 点击城市
    CityBtn (Nowitem) {
      // 筛选出对应城市名的数据，放到vuex
      this.$store.state.NowCityOlny = this.CityList.filter(item => {
        return item.label === Nowitem
      })
      // 重新选择城市，先将之前筛选的条件清空
      Object.keys(this.$store.state.RoomScreenObj).forEach(key => { this.$store.state.RoomScreenObj[key] = null })
      // 在vuex中将选中的城市ID，存入本地
      this.$store.commit('NowCityOnly')
      this.$router.go(-1)
      console.log('参数啊啊')
    },
    async AllFn () {
      const res = await ChoiceCityRequest(1)
      this.CityList = res.data.body
      const resHot = await HotCityRequest()
      this.HotCityList = resHot.data.body

      // // 打印A-Z大写首字母
      for (let i = 65; i < 91; i++) {
        this.str.push(String.fromCharCode(i))
      }
      this.str.unshift('热')
      for (const p in this.CityList) {
        this.cityNameList.push(this.CityList[p].label)
      }

      this.str.forEach((item) => {
        this.firstName[item] = []
        this.cityNameList.forEach((el) => {
          const first = pinyin.getFullChars(el).substring(0, 1)
          if (first === item) {
            this.firstName[item].push(el)
          }
        })
      })
      for (const i in this.firstName) {
        if (this.firstName[i].length === 0) {
          this.firstName[i].push('暂无')
        }
      }
      this.HotCityList.forEach(item => { this.firstName.热.push(item.label) })
      this.firstName.热 = this.firstName.热.filter(item => item !== '暂无')
    }
  }
}
</script>

<style lang="less" scoped>
// 头部样式
.CityListTop {
  // 城市列表
  .CityList {
    /deep/ .van-index-bar {
      /deep/ .van-index-bar__sidebar {
        background-color: pink;
        /deep/ .van-index-bar__index {
          background-color: pink;
          line-height: 0.57333rem;
        }
      }
    }
    .van-cell-group {
      /deep/ .van-cell {
        /deep/ .van-cell__title {
          background-color: pink;
          font-size: 30px;
        }
      }
    }
  }
}
/deep/ .van-nav-bar {
  padding-top: 5px;
  height: 45px;
  background-color: #21b97a;
  .van-nav-bar__title {
    color: #fff;
    font-size: 20px;
  }
  .van-icon-arrow-left {
    color: #fff;
    font-size: 18px;
  }
}
.CitySort {
  /deep/ .van-cell {
    font-size: 18px;
    margin-left: -20px;
  // background-color: #21b97a;

  }
}
/deep/ .van-index-bar__sidebar {
  padding-top: 50px;
}
/deep/ .van-index-bar__index {
  font-size: 12px;
  line-height: 15px;
  height:20px;
  text-align: center;
}
.nowCity{
  .van-cell{
padding-left:12px;
span{
  color:#999;
}
  /deep/ .van-cell__label{
  font-size: 18px;
  padding:15px 0 ;
  color:#333;
}
}
}
</style>
